<template>
  <div id="contentBox">
    <el-row style="margin-bottom:10px">
      <el-button type="primary" size="small" @click="dialogVisible=true">添加分销课程</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      fit
      :header-cell-style="{background:global.mainColor}"
    >
      <el-table-column prop="date" label="课程名称" align="center"></el-table-column>
      <el-table-column prop="name" label="佣金比例" align="center"></el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="700px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="选择课程" prop="course">
          <el-select v-model="ruleForm.course" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择套餐" prop="date">
          <el-checkbox-group v-model="ruleForm.date">
            <el-checkbox label="周一到周五" name="date"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label=" " prop="meal">
          <el-checkbox-group v-model="ruleForm.meal">
            <el-checkbox label="美术课+书法课" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-form-item label="佣金比例 %" prop="commission" width="100px">
            <el-input v-model.number="ruleForm.commission"></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Marketingcourse",
  data() {
    // 验证佣金
    var validateCommission = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入佣金比例"));
      } else if (value <= 0 || value > 50) {
        console.log(value);
        callback(new Error("佣金不能小于等于0或者大于50"));
      } else {
        callback();
      }
    };
    return {
      tableData: [
        {
          date: "超级初级的一节美术课还有很多",
          name: "50%",
        },
        {
          date: "超级初级的一节美术课还有很多",
          name: "50%",
        },
        {
          date: "超级初级的一节美术课还有很多",
          name: "50%",
        },
      ],
      ruleForm: {
        course: "", //课程
        date: [], //套餐时间
        meal: [], //套餐
        commission: null, //佣金
      },
      rules: {
        commission: [
          { validator: validateCommission, trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        course: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date: [
          {
            type: "array",
            required: true,
            message: "请选择课程时间",
            trigger: "change",
          },
        ],
        meal: [
          {
            type: "array",
            required: true,
            message: "请选择课程套餐",
            trigger: "change",
          },
        ],
      },
      dialogVisible: false,
      title: "添加分销课程套餐",
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 添加分销套餐
    handleAdd() {},
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.title = "编辑分销课程套餐";
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将删除该分销课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
#contentBox {
  padding: 25px 20px 20px 20px;
}
/deep/.el-dialog__body {
  padding: 20px;
}
</style>